<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="css/normalize.css">
	<link rel="stylesheet" href="head&kk.css">
	<style>
		.content{
			background-image: url(img/21.png);
			filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale');    
		    -moz-background-size:100% 100%;    
		        background-size:100% 100%;    
		    height:491px;  
		    z-index: 1;
		}
		.titles_1{
			text-align: center;font-size: 24px;color: rgb(216,167,111);padding-top: 30px;
		}
		.titles_2{
			text-align: center;font-size: 12px;color: rgb(243,222,153);height: 20px;line-height: 20px;
		}
		.imgs_01{
			position: absolute;
			padding-left: 125px;
			padding-top: 10px;
			height: 410px;
		}
		.imgs_02{
			position: absolute;
			padding-left: 142px;
			margin-top: -5px;
		}
		.imgs_03{
			position: absolute;
			margin-top: 60px;
    		padding-left: 148px;
    		display: none;
		}
		.imgs_04{
			position: absolute;
			margin-top: 120px;
    		padding-left: 148px;
    		display: none;
		}
		.imgs_05{
			position: absolute;
			margin-top: 180px;
    		padding-left: 148px;
    		display: none;
		}
		.imgs_06{
			position: absolute;
			margin-top: 240px;
    		padding-left: 148px;
    		display: none;
		}
		.imgs_07{
			position: absolute;
			margin-top: 320px;
    		padding-left: 148px;
    		display: none;
		}
		.imgs_2{
			position: absolute;
			margin-top: 270px;
    		padding-left: 180px;
    		display: none;
		}
		.time_01{
			color: white;
			font-size: 12px;
		}
		.time_02{
			color: rgb(216,167,111);
			font-size: 12px;
		}
		.time_1{
			position: absolute;
			margin-top: 50px;
    		
		}
		.time_2{
			position: absolute;
			margin-top: 110px;
   		 	padding-left: 200px;
   		 	display: none;
		}
		.time_3{
			position: absolute;
			margin-top: 170px;
    		
		}
		.time_4{
			position: absolute;
			margin-top: 230px;
    		padding-left: 200px;
    		display: none;
		}
		.time_5{
			position: absolute;
			margin-top: 320px;
    		
		}
	</style>
</head>
<body>
	<div class="page">
	<svg xmlns="http://www.w3.org/2000/svg" width="322" height="48" viewBox="0 0 322 48" style="margin-bottom: -4px;"><path fill="#F6F9FA" d="M0 48v-4.052C0 23.389 16.911 8.571 37.225 6.723c0 0 61.917-3.723 123.819-3.723 61.872 0 123.73 3.723 123.73 3.723C305.329 8.571 322 23.389 322 43.948V48"/></svg>
		<!-- 头部 -->
		<div class="header">
			<h1 class="head_name">邀请函</h1>
		</div>
		<!-- 内容 -->
		<div class="content">
			<!-- 音频图标 -->
			<div class="icon">
				<span class="glyphicon glyphicon-music" aria-hidden="true"></span>
			</div>
			<div class="auds">
			<!-- 音频文件 -->
				<audio src="i/1.mp3" controls="controls" autoplay="autoplay" id="audio" >
				</audio>
			</div>
			<!-- 背景图 -->
			<div id="family">
				<div class="titles">
					<div class="titles_1"><span>发布会议程</span></div>
					<div class="titles_2"><span>The conference agenda</span></div>
				</div>
				<div class="imgs">
					<img class="imgs_01" src="img/44.png" alt="">
					<img src="img/41.png" alt="" class="imgs_02">
					<img src="img/42.png" alt="" class="imgs_03">
					<img src="img/42.png" alt="" class="imgs_04">
					<img src="img/42.png" alt="" class="imgs_05">
					<img src="img/42.png" alt="" class="imgs_06">
					<img src="img/42.png" alt="" class="imgs_07">
				</div>
				<div class="times">
					<div class="time_1">
						<span class="time_01">08:00</span><br>
						<span class="time_02">签到</span>
					</div>
					<div class="time_2">
						<span class="time_01">09:00</span><br>
						<span class="time_02">吃冰淇淋</span>
					</div>
					<div class="time_3">
						<span class="time_01">10:00</span><br>
						<span class="time_02">吃雪糕</span>
					</div>
					<div class="time_4">
						<span class="time_01">11:00</span><br>
						<span class="time_02">吃蛋糕</span>
					</div>
					<div class="time_5">
						<span class="time_01">12:00</span><br>
						<span class="time_02">结束</span>
					</div>
				</div>
				<div class="imgs_2">
					<img src="img/43.png" alt="">
				</div>
				
			</div>
		</div>
		<svg xmlns="http://www.w3.org/2000/svg" width="322" height="45" viewBox="0 0 322 45"><path fill="#F6F9FA" d="M322 0v4.052c0 20.559-16.671 35.377-37.225 37.225 0 0-61.857 3.723-123.73 3.723-61.902 0-123.819-3.723-123.819-3.723C16.911 39.429 0 24.611 0 4.052V0"/></svg>
	</div>
	<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
	<script type="text/javascript" src="js/bootstrap.min.js"></script>
	<script type="text/javascript">
		$(function(){
			$(".imgs_03").fadeIn(500);
			$(".imgs_04").fadeIn(800);
			$(".imgs_05").fadeIn(1000);
			$(".imgs_06").fadeIn(1500);
			$(".imgs_07").fadeIn(2000);
			$(".imgs_2").fadeIn(3000);
			$(".time_1,.time_3,.time_5").animate({left:'100px'},1000);
			$(".time_2,.time_4").fadeIn(2000)
		})
	</script>
</body>
</html>